<template>
  <div class="blockTradingRecordList">
    <CustomNavBar :title="t('OTC transaction records')"> </CustomNavBar>
    <div class="container">
      <van-list 
        v-model:loading="loading"
        :loading-text="t('loading......')"
        @Load="getOTCRecords"
        :finished="finished"
        :finished-text="t('No more data')"
      >
        <van-cell v-for="e in recordList" :key="e.id">
            <div class="cell-item">
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('order number')}}</div>
              <div class="cell-item-box-value">{{e.order_number}}</div>
            </div>
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('Stock')}}</div>
              <div class="cell-item-box-value">{{decimalpre(e.quantity)}}</div>
            </div>
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('Price')}}</div>
              <div class="cell-item-box-value amount">₹{{decimalpre(e.price)}}</div>
            </div>
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('arrears')}}</div>
              <div class="cell-item-box-value arrears">₹{{decimalpre(e.arrears)}}</div>
            </div>
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('Amount paid')}}</div>
              <div class="cell-item-box-value amount">₹{{decimalpre(e.paid)}}</div>
            </div>
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('Status')}}</div>
              <div class="cell-item-box-value">{{e.status === 'Y' ? 'holding' : 'Close Position'}}</div>
            </div>
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('Direction')}}</div>
              <div class="cell-item-box-value">{{t('Up')}}</div>
            </div>
            <div class="cell-item-box">
              <div class="cell-item-box-name">{{t('Creation time')}}</div>
              <div class="cell-item-box-value">{{date(new Date(e.create_time), 'YYYY-MM-DD hh:mm:ss')}}</div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import { get } from "@/utils/request";
import { decimalpre, date } from '@/utils/util'
import { t } from '@/languages'
const recordList = ref([])
const loading = ref(false)
const finished = ref(false)
const totalPage = ref(0)
const limit = 10
const page = ref(1)
async function getOTCRecords(params) {
  try {
    const res = await get("/api/app/otc/records/", {
      page: page.value,
      limit: 10,
    });
    recordList.value = recordList.value.concat(res.data || [])
    console.log(recordList.value,length, res)
    if(recordList.value.length === res.count) {
      finished.value = true
    } else  {
      page.value += 1
    }
  } catch (error) {
    finished.value = true
  } finally {
    loading.value = false
  }
}

</script>
<style lang="scss">
.blockTradingRecordList .container {
  padding: 0.26667rem;
}
.van-cell {
  background-color: #0e1822;
  padding: 0;
  &:after {
    display: none;
  }
}

.cell-item {
  padding: 0.26667rem;
  background: #0e1822;
  border: 0.02667rem solid #2b4e5a;
  border-radius: 0.21333rem;
  margin-bottom: 0.26667rem;
}

.cell-item .cell-item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cell-item .cell-item-box .cell-item-box-value {
  font-size: 0.37333rem;
  color: #ccc;
}

.cell-item .cell-item-box .amount {
  color: #62f792;
}

.cell-item .cell-item-box .arrears,
.blockTradingRecordList .container .cell .cell-item .cell-item-box .cell-item-box-color {
  color: red;
}

.blockTradingRecordList .empty {
  margin-top: 1.86667rem;
  display: flex;
  justify-content: center;
}

.blockTradingRecordList .empty img {
  width: 75vw;
  height: 25vh;
}
</style>
